<template>
  <div class="crumbs">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home/index/index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/home">试卷管理</a></el-breadcrumb-item>
    </el-breadcrumb>
  </div>
  <div class="operate">
    <div style="padding:10px">
      <div class="add">
        <el-button type="primary" @click="addtestpageper">添加试卷</el-button>
      </div>
      <div class="bankname">请输入试卷名：</div>
      <div class="input">
        <el-input v-model="key" class="w-50 m-2" placeholder="请输入想要查找的试卷名" @change="search" />
      </div>
      <div class="check">
        <el-checkbox @change="checkboxban" label="只看禁用" size="large" />
        <el-checkbox @change="checkboxpublish" label="只看发布" size="large" />
      </div>
    </div>
    <el-skeleton :rows="5" :loading="Loading" animated>
      <div class="operate">
        <el-table class="table" v-loading="VLoading" border :data="tableData">
          <el-table-column type="selection" width="55" />
          <el-table-column prop="tpname" label="试卷名" width="180" />
          <el-table-column label="标签" width="120">
            <template #default="scope">
              <el-tag disable-transitions>
                {{ scope.row.tplabel }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="总分" width="120">
            <template #default="scope">
              <el-tag disable-transitions>
                {{ scope.row.score }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="题目数量" width="120">
            <template #default="scope">
              <el-tag disable-transitions>
                {{ scope.row.tpcount }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="及格分数" width="120">
            <template #default="scope">
              <el-tag disable-transitions>
                {{ scope.row.passscore }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="等级" width="120">
            <template #default="scope">
              <el-tag disable-transitions>
                {{ scope.row.tplv }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="发布" width="120">
            <template #default="scope">
              <el-tag :type="scope.row.isPublish === 0 ? 'warning' : 'success'" disable-transitions>{{
                  scope.row.isPublish
                    === 0 ? "否" : "是"
              }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="禁用" width="120">
            <template #default="scope">
              <el-tag :type="scope.row.isBan === 0 ? 'success' : 'warning'" disable-transitions>
                {{ scope.row.isBan === 0 ? "否" : "是" }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="使用" width="120">
            <template #default="scope">
              <el-tag disable-transitions>
                {{ scope.row.tpusecount }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="200">
            <template #default="scope">
              <el-button type="primary" @click="bankdetalis(scope)" size="small">
                详情
              </el-button>
              <el-button v-if="scope.row.isPublish === 1" :type="scope.row.isBan === 0 ? 'warning' : 'success'"
                @click="IsBan(scope)" size="small">
                {{ scope.row.isBan === 0 ? "禁用" : "启用" }}
              </el-button>
              <el-button v-if="scope.row.isPublish === 0 && scope.row.tpusecount === 0"
                :type="scope.row.isPublish === 0 ? 'success' : 'info'" @click="IsPublish(scope)" size="small">
                {{ scope.row.isPublish === 0 ? "发布" : "取消" }}
              </el-button>
              <el-button @click="Delete(scope)" v-if="scope.row.isPublish === 0 || scope.row.isUse < 0" type="danger"
                size="small">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="paging">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :page-sizes="[5, 10, 50, 100]" :page-size="pages.limit" :total="pages.total">
          </el-pagination>
        </div>
      </div>
    </el-skeleton>
  </div>
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs } from "vue";
import { TestPaper } from "@/utils/Exam/testPaper/testPaper";
import { TaskPaper } from '@/api/Product/exaam';
import router from "@/router";
import { ElMessage } from "element-plus";

const _exam = new TaskPaper();

export default defineComponent({
  setup() {
    const data = reactive<TestPaper>({
      tableData: [],
      Delete: "删除",
      key: "",
      timekey: "",
      checkboxban: -1,
      checkboxpublish: -1,
      Loading: true,
      VLoading: false,
      pages: {
        page: 1,
        limit: 5,
        total: 10,
      },
    });
    const methods = {
      //查询所有试题
      GetTestPaper() {
        _exam.GetTaskPaper({
          page: data.pages.page,
          limit: data.pages.limit,
          key: data.key,
          isBan: data.checkboxban,
          isPublish: data.checkboxpublish,
        }).then(res => {
          if (res.code === 0) {
            data.Loading = false
            data.VLoading = false,
              data.tableData = res.data.data
            data.pages.total = res.data.total
          }
        })
      },
      //删除试卷
      Delete(val: any) {
        let tp = [{
          tpid: val.row.tpid
        }]
        data.VLoading = true,
          _exam.DeleteTaskPaper(tp).then((res: any) => {
            if (res.code === 0) {
              data.VLoading = false
              ElMessage.success(res.message)
              methods.GetTestPaper();
            } else {
              ElMessage.success(res.message)
            }
          })
      },
      //添加试卷
      addtestpageper() {
        router.push("/testPaper/addTestPaper");
      },
      //试卷详情
      bankdetalis(val: any) {
        router.push("/testPaper/dateliTestPaper/" + val.row.tpid);
      },
      //模糊查询
      search(val: any) {
        data.key = val;
        methods.GetTestPaper();
      },
      //禁用
      IsBan(val: any) {
        data.VLoading = true;
        let testpaper = [{
          tpid: val.row.tpid
        }]
        _exam.IsBanTaskPaper(testpaper).then((res: any) => {
          if (res.code === 0) {
            ElMessage.success(res.message);
            methods.GetTestPaper()
          } else {
            ElMessage.error(res.message);
          }
        })

      },
      //发布
      IsPublish(val: any) {
        data.VLoading = true;
        let testpaper = [{
          tpid: val.row.tpid
        }]
        _exam.IsPublishTaskPaper(testpaper).then((res: any) => {
          if (res.code === 0) {
            ElMessage.success(res.message);
            methods.GetTestPaper()
          } else {
            ElMessage.error(res.message);
          }
        })
      },
      //禁用复选框
      checkboxban(val: any) {
        data.VLoading = true;
        data.checkboxban = val == true ? 1 : 0;
        methods.GetTestPaper();
      },
      //发布复选框
      checkboxpublish(val: any) {
        data.VLoading = true;
        data.checkboxpublish = val == true ? 1 : 0;
        methods.GetTestPaper();
      },
      handleSizeChange(val: number) {
        data.pages.limit = val;
        methods.GetTestPaper();
      },
      handleCurrentChange(val: number) {
        data.pages.page = val;
        methods.GetTestPaper();
      },
    };
    onMounted(() => {
      methods.GetTestPaper();
    })
    return {
      ...toRefs(data),
      ...methods,
    };
  },
});
</script>
<style scoped>
.operate {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  padding: 10px;
  margin: 10px;
  background-color: white;
  width: 94%;
}

.crumbs {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  padding: 20px;
  margin: 15px;
  background-color: white;
  width: 94%;
}

.add {
  margin-left: 50px;
  display: inline-block;
}

.delete {
  margin-left: 50px;
  display: inline-block;
}

.input {
  margin-left: 10px;
  width: 300px;
  display: inline-block;
}

.block {
  display: inline-block;
}

.check {
  margin-left: 30px;
  display: inline-block;
}

.paging {
  margin: 20px;
}

.bankname {
  display: inline-block;
  margin-left: 20px;
  padding: 5px;
}
</style>
